<template>
  <div class="tac p-image">
    <img :src="activeSrc" loading="lazy" @click="onViewGroup" />
  </div>
</template>
<script>
import previewGroup from './previewGroup.vue'
import { createGlobalComponent } from './createComponent.js'
export default {
  props: {
    listSrc: {
      type: Array,
      default: () => []
    },
    src: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      pictures: [],
      activeSrc: null
    }
  },
  watch: {
    src(val) {
      this.activeSrc = val
    },
    listSrc: {
      handler(val) {
        this.activeSrc = this.src || (this.listSrc && this.listSrc[0]) || ''
      },
      deep: true
    }
  },
  mounted() {
    this.activeSrc = this.src || (this.listSrc && this.listSrc[0]) || ''
  },
  methods: {
    onViewGroup() {
      if (this.listSrc.length === 0) {
        this.pictures.push(this.src)
      } else {
        this.pictures = this.listSrc
      }
      document.querySelector('.ant-image-preview-root.previewGroup')?.remove()
      this.previewDom = createGlobalComponent(previewGroup, {
        value: true,
        src: this.activeSrc,
        listSrc: this.pictures,
        close: () => {
          this.previewDom.remove()
          this.previewDom = null
        }
      })
    }
  }
}
</script>
<style lang="less">
.p-image {
  max-height: 100%;
  max-width: 100%;
  img {
    max-height: 100%;
    max-width: 100%;
  }
}
</style>
